<template>
    <div class="hello">

        <div class="head">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>porter platform</span>
                    <el-button style="float: right; padding: 3px 0" disabled type="text">Log Out</el-button>
                </div>
                <div class="flex_between">
                    <div class="userInfo">
                        <div class="flex_ item">
                            <div class="name">nikename：</div>
                            <div>{{ userInfo.nickname }}</div>
                            <el-tag style="margin-left: 10px;" size="mini" type="success">normal</el-tag>
                        </div>
                        <div class="flex_ item">
                            <div class="name">Total revenue：</div>
                            <div>${{ userInfo.invitation_rewards }}</div>
                        </div>
                        <div class="flex_ item">
                            <div class="name">Withdrawn：</div>
                            <div>${{ userInfo.withdrawn_rewards }}</div>
                        </div>
                        <div class="flex_ item">
                            <div class="name">Withdrawable：</div>
                            <div>${{ userInfo.remaining_withdrawable_rewards }}</div>
                            <el-button style="margin-left: 30px;" size="mini" type="warning" plain
                                @click="shenqingtixian">Apply for withdrawal</el-button>
                        </div>
                        <!-- <div class="flex_ item">
                            <div class="name">Watch ad：</div>
                            <div>{{ userInfo.share_ratio_adview }} </div>
                        </div>
                        <div class="flex_ item">
                            <div class="name">click on ad：</div>
                            <div>{{ userInfo.share_ratio_adview_click }}</div>
                        </div> -->
                    </div>
                    <div class="btns flex_column" style="height: 124px;">
                        <el-row>
                            <el-button type="info" plain disabled>Withdrawal rules</el-button>
                        </el-row>

                        <el-row>
                            <el-button type="success" plain @click="getWithdrawListHandel">Withdrawals
                                record</el-button>
                        </el-row>
                    </div>
                </div>
            </el-card>
            <el-card class="box-card" style="margin-top: 30px;">
                <div class="flex_between" style="margin-bottom: 20px;">
                    <div>my Media</div>
                    <el-button type="primary" @click="add">add Media</el-button>
                </div>
                <el-table :data="mediaList" align="center" border style="width: 100%">
                    <el-table-column prop="media_name" width="120" align="center" label="media_name">
                    </el-table-column>
                    <el-table-column prop="import_totals" align="center" label="Import">
                    </el-table-column>
                    <el-table-column prop="play_totals" align="center" label="Play">
                    </el-table-column>
                    <el-table-column prop="adView_totals" align="center" width="80" label="adView">
                    </el-table-column>
                    <el-table-column prop="adView_click_totals" align="center" width="120" label="adView_click">
                    </el-table-column>
                    <el-table-column prop="revenue_totals" align="center" width="120" label="Gross Income">
                    </el-table-column>
                    <el-table-column prop="status" width="100" align="center" label="status">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 0" size="mini" type="success">normal</el-tag>
                            <el-tag v-if="scope.row.status == 1" size="mini" type="danger">ban</el-tag>
                            <el-tag v-if="scope.row.status == 2" size="mini" type="warning">Reviewing</el-tag>
                            <el-tag v-if="scope.row.status == 3" size="mini" type="danger">Rejected</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reason" align="center" label="reason">
                    </el-table-column>
                    <el-table-column prop="update_date" align="center" label="update_time" width="180">
                    </el-table-column>
                    <el-table-column label="operate" width="170" align="center" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button :disabled="scope.row.status != 3" link type="warning" size="mini" plain
                                @click="xiugaiziyuan(scope.row)">edit</el-button>
                            <el-button :disabled="scope.row.status != 0" link type="primary" size="mini" plain
                                @click="handleDetail(scope.row)">detail</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-card>
        </div>
        <el-dialog title="add Media" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="media_name">
                    <el-input v-model="form.media_name"></el-input>
                </el-form-item>
                <el-form-item label="media_url">
                    <el-input v-model="form.media_url"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="addMedia">Confim</el-button>
            </span>
        </el-dialog>
        <el-dialog title="spread Link" :visible.sync="dialogVisible1" width="1200px" @close="close">
            <div class="flex_between" style="margin-bottom: 20px;">
                <div>{{ media_name }}</div>
                <el-button type="primary" size="small" @click="createLink">create Link</el-button>
            </div>
            <el-table :data="links" align="center" border style="width: 100%">
                <el-table-column prop="media_name" width="120" align="center" label="media_name">
                </el-table-column>
                <el-table-column prop="link_url" width="120" show-overflow-tooltip align="center" label="media_link">
                </el-table-column>
                <el-table-column prop="import_total" align="center" label="Import">
                </el-table-column>
                <el-table-column prop="play_total" align="center" label="play">
                </el-table-column>
                <el-table-column prop="adView_total" align="center" label="adView">
                </el-table-column>
                <el-table-column prop="adView_click_total" align="center" width="120" label="adView_click">
                </el-table-column>
                <el-table-column prop="revenue_total" width="120" align="center" label="revenue">
                </el-table-column>
                <el-table-column prop="status" align="center" label="status">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" size="mini" type="success">normal</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="danger">Disable</el-tag>

                    </template>
                </el-table-column>
                <el-table-column prop="update_date" align="center" label="update_time" width="180">
                </el-table-column>
                <el-table-column label="operate" width="180" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" size="mini" disabled plain
                            @click="handleDetail(scope.row)">Disable</el-button>
                        <el-button link type="success" size="mini" plain @click="copy(scope.row)">copy</el-button>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="Analog interface" width="400" align="center"
                    class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" size="mini" @click="importHandel(scope.row)">import</el-button>
                        <el-button link type="success" size="mini" @click="play(scope.row)">play</el-button>
                        <el-button link type="warning" size="mini" @click="adview(scope.row)">Watch
                            ad</el-button>
                        <el-button link type="danger" size="mini" @click="adviewClick(scope.row)">click on
                            ad</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>
        <el-dialog title="Apply for withdrawal" :visible.sync="dialogVisible2" width="30%">

            <el-form ref="form" :model="form1" label-width="140px">
                <el-form-item label="bank card">
                    <el-input v-model="form1.email"></el-input>
                </el-form-item>
                <el-form-item label="Withdrawal Amount">
                    <el-input v-model="form1.amount"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">Cancel</el-button>
                <el-button type="primary" @click="tixian">Confim</el-button>
            </span>
        </el-dialog>
        <el-dialog title="edit" :visible.sync="dialogVisible3" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="media_name">
                    <el-input v-model="form.media_name"></el-input>
                </el-form-item>
                <el-form-item label="media_url">
                    <el-input v-model="form.media_url"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">Cancel</el-button>
                <el-button type="primary" @click="xiugai">Confim</el-button>
            </span>
        </el-dialog>
        <el-dialog title="operate" :visible.sync="dialogVisible4" width="30%">
            <div style="margin-bottom: 20px ; color: red;">演示接口-填写平台获得的收益：
                <br>如被分享用户观看了广告,平台获得2元收益。就填写2，点击提交就会给当前用户按照专属规则分佣。
            </div>
            <el-input v-model="price"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible4 = false">Cancel</el-button>
                <el-button type="primary" @click="submitHandel">Confim</el-button>
            </span>
        </el-dialog>
        <el-dialog title="withdraw list" :visible.sync="dialogVisible5" width="1200px">
            <el-table :data="withdrawList" align="center" border style="width: 100%">
                <el-table-column prop="uid" align="center" label="userid">
                </el-table-column>
                <el-table-column prop="paypal_account" show-overflow-tooltip align="center" label="paypal_account">
                </el-table-column>
                <el-table-column prop="amount" align="center" label="amount">
                </el-table-column>
                <el-table-column prop="status" align="center" label="status">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" size="mini" type="warning">Reviewing</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="success">success</el-tag>
                        <el-tag v-if="scope.row.status == 2" size="mini" type="danger">Rejected</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="reason" align="center" label="reason">
                </el-table-column>
                <el-table-column prop="update_date" align="center" label="update_time" width="180">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            form: {

            },
            form1: {

            },
            form2: {

            },
            userInfo: {},
            mediaList: [],
            links: [],
            media_name: '',
            price: '',
            queryInfo: {},
            index: 1,
            withdrawList:[]
        }
    },
    created() {
        this.init()
        this.initMediaList()
    },
    methods: {
        shenqingtixian() {
            this.form1={}
            this.dialogVisible2 = true
        },
        getWithdrawListHandel() {
            this.getWithdrawList()
            this.dialogVisible5 = true
        },
        close() {
            this.init()
            this.initMediaList()
        },
        async importHandel(row) {
            let query = {
                id: row.id,
                uid: row.uid
            }
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/trackUserActivityParse', query)
            if (res.code == 0) {
                this.$message.success('success');
                let querys = {
                    id: row.media_id,
                    uid: row.uid
                }
                this.getLinks(querys)
            }
        },
        async play(row) {

            let query = {
                id: row.id,
                uid: row.uid
            }
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/trackUserActivityPlay', query)
            if (res.code == 0) {
                this.$message.success('success');
                let querys = {
                    id: row.media_id,
                    uid: row.uid
                }
                this.getLinks(querys)
            }
        },
        async adview(row) {
            this.queryInfo = {}
            this.queryInfo = Object.assign({}, row);
            this.price = ''
            this.index=1
            this.dialogVisible4 = true
            
        },
        async adviewClick(row) {
            this.queryInfo = {}
            this.queryInfo = Object.assign({}, row);
            this.price = ''
            this.index = 2
            this.dialogVisible4 = true

        },
        async submitHandel() {
            if(!this.price) return 
            let request = ''
            if (this.index == 1) {
                request = 'https://chatai-pro.wecall.info/node/porter/trackUserActivityAdView'
            } else if (this.index == 2) {
                request = 'https://chatai-pro.wecall.info/node/porter/trackUserActivityAdViewClick'
            }
            let query = {
                id: this.queryInfo.id,
                uid: this.queryInfo.uid,
                income: this.price
            }
            const { data: res } = await axios.post(request, query)
            if (res.code == 0) {
                this.$message.success('success');
                let querys = {
                    id: this.queryInfo.media_id,
                    uid: this.queryInfo.uid,
                }
                this.getLinks(querys)
            } else {
                this.$message.error('error');
            }
            this.dialogVisible4=false
        },
        copy(row) {
            this.$copyText(row.link_url).then(
                (e) => {
                    this.$message.success('success');
                    console.log(e);
                },
                (err) => {
                    console.log(err);
                }
            );

        },
        async createLink() {
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/createLink', this.form2)
            if (res.code == 0) {
                this.$message.success('success');
                this.getLinks(this.form2)

            }
        },
        async getLinks(row) {

            let query = {
                media_id: row.id,
                uid: row.uid
            }
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/getLinkList', query)
            res.data.forEach(item => {
                if (item.adView_click_total == null) {
                    item.adView_click_total = 0
                }
                item.revenue_total = '$' + item.revenue_total
            })
            this.links = res.data
            this.dialogVisible1 = true

        },
        async xiugai() {
            let query = {
                id: this.form.id,
                media_name: this.form.media_name,
                media_url: this.form.media_url,
                status: 2,
                reason: '-'
            }
            console.log(query)
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/editMedia', query)
            console.log(res)
            if (res.code == 0) {
                this.dialogVisible3 = false
                this.initMediaList()

            }
        },
        xiugaiziyuan(row) {
            this.form = Object.assign({}, row);
            this.dialogVisible3 = true

        },
        async init() {
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/getUsreInfo', { id: 1 })
            this.userInfo = res.data
        },
        async addMedia() {
            if (!this.form.media_name) return this.$message.error('Please fill in the resource name');
            if (!this.form.media_url) return this.$message.error('Please fill in the resource address');
            let query = {
                id: this.form.id,
                media_name: this.form.media_name,
                media_url: this.form.media_url,
                uid: 1
            }
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/editMedia', query)
            console.log(res)
            if (res.code == 0) {
                this.dialogVisible = false
                this.$message.success('success');
                this.initMediaList()
            }
        },
        async initMediaList() {
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/getMediaList', { uid: 1 })
            res.data.forEach(item => {
                if (item.adView_click_totals == null) {
                    item.adView_click_totals = 0
                }
                item.revenue_totals = '$' + item.revenue_totals
            })
            this.mediaList = res.data
            console.log(this.mediaList)
        },
        add() {
            this.form = {}
            this.dialogVisible = true
        },
        handleDetail(row) {
            this.media_name = row.media_name
            this.form2 = row
            this.getLinks(row)
        },
        async tixian() {
            if (!this.form1.email) return this.$message.error('Bank card cannot be empty')
            if (!this.form1.amount) return this.$message.error('Amount cannot be empty')
            let query = {
                id: 1,
                email: this.form1.email,
                amount: this.form1.amount,
            }
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/withdraw', query)
            if (res.code == 0) {
                this.$message.success('Submitted for review...')
                this.init()
                this.dialogVisible2 = false
            } else {
                this.$message.error(res.msg)
            }
        },
        async getWithdrawList() {
            const { data: res } = await axios.post('https://chatai-pro.wecall.info/node/porter/withdrawListById', { id: 1 })
            console.log(res)
            this.withdrawList = res.data
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}

.hello {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.userInfo {
    .item {
        margin-bottom: 10px;
    }
}
</style>